<template>
  <view class="enterprise-item-card">
    <view class="card">
      <view class="card-avatar">
        <view class="card-avatar-img">
          {{ cardDetail.avatar }}
        </view>
      </view>
      <view class="card-enterprise">
        <view
          class="card-enterprise-main-info"
          @tap="handleEnterpriseNameClick(cardDetail)"
        >
          <view class="enterprise-name">
            {{ cardDetail.enterpriseName }}
          </view>
          <view class="enterprise-status">
            {{ cardDetail.registerStatus }}
          </view>
        </view>
        <view class="card-enterprise-honour-info">
          <view
            class="honour-total"
            @tap="handleHonourTotalClick(cardDetail.enterpriseName)"
          >
            <view class="honour-label"> 荣誉总数 </view>
            <view class="honour-val">
              {{ cardDetail.honorCountNumber }} 项
            </view>
          </view>
          <view class="honour-score">
            <view class="honour-label"> 荣誉评分 </view>
            <view class="honour-val">
              {{ cardDetail.honorTotalScore }}
            </view>
          </view>
        </view>
        <view class="card-enterprise-btn-group" v-if="showBtnGroup">
          
          <!-- v-if="cardDetail.isManager" -->
          <view
            class="btn"
            @tap="handleJoinEnterpriseClick(cardDetail)"
          >
            <up-icon name="man-add-fill" color="#fff" :size="24" />
            <text class="btn-text">加入该企业</text>
          </view>
          <!-- v-else  -->
          <view class="btn" @tap="handleApplyManagerClick(cardDetail)">
            <up-icon name="man-add-fill" color="#fff" :size="24" />
            <text class="btn-text"> 申请管理员 </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  cardDetail: {
    type: Object,
    default: {},
  },
  showBtnGroup: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits([
  "honourTotalClick",
  "enterpriseNameClick",
  "joinEnterpriseClick",
  "applyManagerClick",
]);
const handleHonourTotalClick = (enterpriseName) => {
  emit("honourTotalClick", enterpriseName);
};
const handleEnterpriseNameClick = (item) => {
  emit("enterpriseNameClick", item);
};

const handleJoinEnterpriseClick = (item) => {
  emit("joinEnterpriseClick", item);
};

const handleApplyManagerClick = (item) => {
  emit("applyManagerClick", item);
};
</script>
<style scoped lang=less>
.enterprise-item-card {
  background-color: #ffffff;
  border-bottom: 1rpx solid #dadada;

  .card {
    display: flex;
    padding-top: 20rpx;

    &-avatar {
      &-img {
        width: 78rpx;
        height: 90rpx;
        text-align: center;
        color: #fff;
        font-family: "ali";
        background-color: #5590f6;
        padding: 5rpx 0;
        border: 1px solid #ccc;
        box-sizing: border-box;
      }
    }

    &-enterprise {
      width: 100%;
      margin-left: 34rpx;

      &-main-info {
        display: flex;
        justify-content: space-between;

        .enterprise-name {
          font-family: "ali-m";
          font-size: 32rpx;
          font-weight: 500;
          color: #272636;
        }

        .enterprise-status {
          width: 66rpx;
          height: 30rpx;
          border-radius: 4rpx;
          margin-left: 45rpx;
          background-color: #00b588;
          font-family: "ali";
          font-size: 20rpx;
          text-align: center;
          color: #fff;
        }
      }

      &-honour-info {
        display: flex;
        margin-top: 20rpx;

        .honour-total,
        .honour-score {
          display: flex;
          width: 190rpx;
          height: 36rpx;
          border-radius: 10rpx;
          border: 1px solid #5590f6;
          margin-right: 20rpx;
          padding-left: 18rpx;

          .honour-label,
          .honour-val {
            flex: 1;
            height: 100%;
            line-height: 36rpx;
            font-family: "ali";
            font-size: 20rpx;
            color: #5590f6;
          }
        }
      }

      &-btn-group {
        height: 52rpx;
        margin: 22rpx 0 45rpx 0;
        display: flex;
        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 194rpx;
          height: 52rpx;
          // background-color: @color-light-grey-border;
          background-color: @color-blue;
          border-radius: 7rpx;
          margin-right: 10rpx;
          .btn-text {
            font-family: "ali-p";
            font-size: 23rpx;
            // color: @color-light-grey-text;
            color: @color-origin-white;
            margin-left: 13rpx;
          }

        }
      }
    }
  }
}
</style>
